<template>
  <div id="app">
    <header>
      <div class="status-icon">
        <img :src="iconUrl" alt="Status Icon" />
      </div>
    </header>

    <div class="status-text">
      您的饮食炎症倾向：{{ status.value }}
    </div>
    <main>
      <div class="grid">
        <div 
          class="grid-item" 
          v-for="item in items" 
          :key="item.name"
          @click="navigateTo(item.path)"
        >
          <img :src="item.icon" alt="Icon" />
          <div>{{ item.name }}</div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
// 引入生命周期钩子
import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const status = reactive({
      value: '促炎'
    });

    const iconUrl = ref('https://bpic.51yuansu.com/pic2/cover/00/32/22/5810e43bdba15_610.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100');

    // 监听窗口尺寸变化并调整滚动行为
    const handleResize = () => {
      if (document.body.scrollHeight <= window.innerHeight) {
        document.body.style.overflow = 'hidden'; // 内容未超出，隐藏滚动条
      } else {
        document.body.style.overflow = 'auto'; // 内容超出，显示滚动条
      }
    };

    onMounted(() => {
      window.addEventListener('resize', handleResize);
      handleResize(); // 初始检查
    });

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
    });

    // 定义菜单项及对应路由
    const items = [
      { 
        name: '饮食记录', 
        icon: 'https://bpic.51yuansu.com/pic2/cover/00/32/22/5810e43bdba15_610.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100',
        path: '/pages/search/foodTracker' // 饮食记录页面路径
      },
      { 
        name: '营养分析', 
        icon: 'https://bpic.51yuansu.com/pic2/cover/00/32/22/5810e43bdba15_610.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100',
        path: '/pages/product/product-comment' // 营养分析页面路径
      },
      { 
        name: '营养教育', 
        icon: 'https://bpic.51yuansu.com/pic2/cover/00/32/22/5810e43bdba15_610.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100',
        path: '/pages/merchant/merchant-nutritionEducation' // 营养教育页面路径
      },
      { 
        name: '抗炎食物排行', 
        icon: 'https://bpic.51yuansu.com/pic2/cover/00/32/22/5810e43bdba15_610.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100',
        path: '/pages/antiInflammatoryFood/antiInflammatoryFood' // 抗炎食物排行页面路径
      }
    ];

    // 页面跳转方法
    const navigateTo = (path) => {
      uni.navigateTo({
        url: path
      });
    };

    return {
      status,
      iconUrl,
      items,
      navigateTo
    };
  }
};
</script>

<style scoped lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.status-icon img {
  width: 50px;
  height: 50px;
}

.status-text {
  margin-left: 10px;
}

main {
  padding: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  display: flex;
  /* padding: 29px; */
  flex-direction: column;
  // width: 150px;
  // height: 150px;
  padding: 10px;
  align-items: center;
  background-color: antiquewhite;
  border-radius: 15px;
}

.grid-item img {
  width: 140px;
    height: 140px;
    margin-bottom: 10px;
}
</style>